<template>
  <div>
    <div class="app-container customer_report">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="時間維度" prop="costCode">
          <el-select
            v-model="queryParams.timeDimension"
            placeholder="請選擇時間維度"
          >
            <el-option
              v-for="dict in dict.type.time_dimension"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分錄統計維度" prop="costTitle">
          <el-select
            clearable
            v-model="queryParams.dataDimension"
            placeholder="請選擇分錄統計維度"
            ref="optionRef"
            @change="select_change"
          >
            <el-option
              v-for="dict in dict.type.entry_data_dimension"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="科目分類" prop="entryCategory">
          <el-select
            v-model="queryParams.entryCategory"
            placeholder="請選擇科目分類"
          >
            <el-option
              v-for="dict in dict.type.entry_category"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="會計科目" prop="accountSubjectArr">
          <el-cascader
            filterable
            v-model="accountSubjectArr_params"
            :options="accountSubjectArr"
            :props="{
              expandTrigger: 'hover',
              value: 'dictValue',
              label: 'name',
              children: 'children',
              checkStrictly: true,
            }"
            @change="queryASHandleChange"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="時間範圍" prop="costTitle">
          <el-date-picker
            v-model="dateArr"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="">
          <el-button type="primary" size="mini" @click="getList"
            >生成</el-button
          >
          <!-- <el-button size="mini" @click="DownloadQuery">下載報告</el-button> -->
        </el-form-item>
      </el-form>
      <div>
        <el-row :gutter="10" class="mb8" id="pdf_box">
          <el-col :span="12">
            <div id="bar"></div>
          </el-col>
          <el-col :span="12">
            <div id="line_box"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { getStatistics } from "@/api/biz/customer";
import { postEntryStatistics, getAccountSubjectTree } from "@/api/biz/entry";
// import BarChart from './dashboard/BarChart'
import * as echarts from "echarts";

export default {
  name: "Customer",
  dicts: [
    "entry_category",
    "time_dimension",
    "customer_data_dimension",
    "industry_type",
    "industry",
    "customer_type",
    "customer_tag",
    "customer_level",
    "customer_source",
    "reservation_type",
    "entry_data_dimension",
    "account_entry_type",
    "as_zero_0000",
    "as_one_1000",
    "as_one_2000",
    "as_one_3000",
    "as_one_4000",
    "as_one_5000",
    "as_one_6000",
    "as_two_1002",
    "as_two_2241",
    "account_entry_status",
  ],
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      accountSubjectArr_params: [],
      dict_list: [],
      // 查询參數
      queryParams: {
        timeDimension: "month",
        dataDimension: "account_subject_one",
        entryCategory: "DEBIT",
        // entryType: "收入",
        accountSubjectType: "",
        accountSubjectOne: "",
        accountSubjectTwo: "",
        startDate: this.$moment().subtract(1, "years").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
      },
      accountSubjectArr: [],
      dateArr: [
        this.$moment().subtract(1, "years").format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD"),
      ],
      seriesName: "ssss",
      chart: null,
      mychart_line_: null,
      chart_bar: {
        xAxisData: [],
        seriesData: [],
        legendData: [],
      },
      chart_line: {
        xAxisData: [],
        seriesData: [],
        legendData: [],
      },
    };
  },
  created() {},
  mounted() {
    this.getAccountSubjectTree();
    // this.postEntryStatistics();
  },
  methods: {
    queryASHandleChange(subject) {
      console.log(subject);
      if (subject.length === 0) {
        this.queryParams.accountSubjectType = "";
        this.queryParams.accountSubjectOne = "";
        this.queryParams.accountSubjectTwo = "";
      }
      if (subject.length === 1) {
        this.queryParams.accountSubjectType = subject[0];
      }
      if (subject.length === 2) {
        this.queryParams.accountSubjectType = subject[0];
        this.queryParams.accountSubjectOne = subject[1];
      }
      if (subject.length === 3) {
        this.queryParams.accountSubjectType = subject[0];
        this.queryParams.accountSubjectOne = subject[1];
        this.queryParams.accountSubjectTwo = subject[2];
      }
    },
    /** 查询收入記錄列表 */
    getAccountSubjectTree() {
      this.loading = true;
      getAccountSubjectTree().then((response) => {
        this.accountSubjectArr = response.data;
        this.dict_list = [
          ...this.dict.type.as_zero_0000,
          ...this.dict.type.as_one_1000,
          ...this.dict.type.as_one_2000,
          ...this.dict.type.as_one_3000,
          ...this.dict.type.as_one_4000,
          ...this.dict.type.as_one_5000,
          ...this.dict.type.as_one_6000,
          ...this.dict.type.as_two_1002,
          ...this.dict.type.as_two_2241,
        ];
        // this.dict_two = [
        //   ...this.dict.type.as_two_1002,
        //   ...this.dict.type.as_two_2241,
        // ];
        this.getList();
      });
    },
    getList() {
      console.log(this.queryParams);
      if (this.dateArr.length != 0) {
        this.queryParams.startDate = this.dateArr[0];
        this.queryParams.endDate = this.dateArr[1];
      }

      this.chart_bar.xAxisData = [];
      this.chart_bar.seriesData = [];
      this.chart_bar.legendData = [];
      this.chart_line.seriesData = [];
      this.loading = true;
      let xAxisData = [];
      let seriesData = [];
      postEntryStatistics(this.queryParams).then((response) => {
        console.log(response);
        response.data.map((item) => {
          if (item.timeDimension == "month") {
            xAxisData.push(item.month);
            item.date = item.month;
          }
          if (item.timeDimension == "quarter") {
            xAxisData.push(item.quarter);
            item.date = item.quarter;
          }
          if (item.timeDimension == "year") {
            xAxisData.push(item.year);
            item.date = item.year;
          }
          // 已選擇維度
          if (item.dataDimension) {
            switch (item.dataDimension) {
              case "j_account_subject_type":
                // j_account_subject_type
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict_list.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                // item.dataDimensionValue_cn = '科目類型借方'
                break;
              case "d_account_subject_type":
                // j_account_subject_type
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict_list.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                // item.dataDimensionValue_cn = '科目類型貸方'
                break;
              case "j_account_subject_one":
                // j_account_subject_type
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict_list.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                // item.dataDimensionValue_cn = '一級科目借方'
                break;
              case "d_account_subject_one":
                // j_account_subject_type
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict_list.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                // item.dataDimensionValue_cn = '一級科目貸方'
                break;
              default:
                break;
            }
          } else {
            item.dataDimensionValue_cn = "所有";
          }
          this.chart_bar.legendData.push(item.dataDimensionValue_cn);
          seriesData.push({
            name: item.dataDimensionValue_cn,
            type: "bar",
            stack: "vistors",
            barWidth: "20",
            month: item.month,
            date: item.date,
            timeDimension: item.timeDimension,
            quarter: item.quarter,
            year: item.year,
            quantity: item.amount,
            data: [],
          });
          // this.chart_bar.seriesData.push(item.quantity);
        });

        this.chart_bar.xAxisData = [...new Set(xAxisData)];
        this.chart_bar.legendData = [...new Set(this.chart_bar.legendData)];
        let new_arr_seriesData = [];

        this.chart_bar.legendData.map((item, index) => {
          let obj_dataDimension = {
            name: item,
            data: [],
          };
          this.chart_bar.xAxisData.map((ele) => {
            let obj = {
              date: ele,
              value: 0,
            };
            obj_dataDimension.data.push(obj);
          });

          new_arr_seriesData.push(obj_dataDimension);
        });
        new_arr_seriesData.map((item) => {
          seriesData.map((ele) => {
            if (item.name == ele.name) {
              item.data.map((key) => {
                if (key.date == ele.date) {
                  key.value = ele.quantity;
                }
              });
            }
          });
        });

        console.log(new_arr_seriesData);
        new_arr_seriesData.map((item) => {
          let obj = {
            name: item.name,
            data: [],
            type: "bar",
            stack: "totle",
            barWidth: "20",
          };
          let obj_line = {
            name: item.name,
            data: [],
            type: "line",
          };
          item.data.map((ele) => {
            obj.data.push(ele.value);
            obj_line.data.push(ele.value);
          });
          this.chart_bar.seriesData.push(obj);
          this.chart_line.seriesData.push(obj_line);
        });

        console.log(55555);
        console.log(this.chart_bar.seriesData);
        console.log(this.chart_bar.legendData);
        console.log(this.chart_line.seriesData);

        this.loading = false;
        let that = this;
        this.$nextTick(() => {
          that.initBarChart();
          setTimeout(() => {
            that.initlineChart();
          }, 100);
        });
      });
    },
    select_change(item) {
      console.log(item);
      this.$nextTick(() => {
        this.seriesName = this.$refs.optionRef.selected.label;
        console.log(this.$refs.optionRef.selected.value);
      });
    },
    /** 查询客戶列表 */
    getList_1() {
      if (this.dateArr.length != 0) {
        this.queryParams.startDate = this.dateArr[0];
        this.queryParams.endDate = this.dateArr[1];
      }
      this.chart_bar.xAxisData = [];
      this.chart_bar.seriesData = [];
      this.chart_bar.legendData = [];
      this.chart_line.seriesData = [];
      // dataDimensionValue
      this.loading = true;
      let xAxisData = [];
      let seriesData = [];
      getStatistics(this.queryParams).then((response) => {
        response.data.map((item) => {
          if (item.timeDimension == "month") {
            xAxisData.push(item.month);
            item.date = item.month;
          }
          if (item.timeDimension == "quarter") {
            xAxisData.push(item.quarter);
            item.date = item.quarter;
          }
          if (item.timeDimension == "year") {
            xAxisData.push(item.year);
            item.date = item.year;
          }
          // 已選擇維度
          if (item.dataDimension) {
            switch (item.dataDimension) {
              case "industry":
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict.type.industry_type.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                break;
              // 客戶類型
              case "customer_type":
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict.type.customer_type.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                break;
              // 客戶來源
              case "customer_source":
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict.type.customer_source.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                break;
              // 客戶標籤
              case "customer_tag":
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict.type.customer_tag.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });
                break;
              // 客戶登記
              case "customer_level":
                if (item.dataDimensionValue == null) {
                  item.dataDimensionValue_cn = "未知";
                }
                this.dict.type.customer_level.map((ele) => {
                  if (ele.value == item.dataDimensionValue) {
                    item.dataDimensionValue_cn = ele.label;
                  }
                });

              default:
                break;
            }
          } else {
            item.dataDimensionValue_cn = "所有";
          }
          this.chart_bar.legendData.push(item.dataDimensionValue_cn);
          seriesData.push({
            name: item.dataDimensionValue_cn,
            type: "bar",
            stack: "vistors",
            barWidth: "20",
            month: item.month,
            date: item.date,
            timeDimension: item.timeDimension,
            quarter: item.quarter,
            year: item.year,
            quantity: item.amount,
            data: [],
          });
          // this.chart_bar.seriesData.push(item.quantity);
        });
        this.chart_bar.xAxisData = [...new Set(xAxisData)];
        this.chart_bar.legendData = [...new Set(this.chart_bar.legendData)];
        let new_arr_seriesData = [];

        this.chart_bar.legendData.map((item, index) => {
          let obj_dataDimension = {
            name: item,
            data: [],
          };
          this.chart_bar.xAxisData.map((ele) => {
            let obj = {
              date: ele,
              value: 0,
            };
            obj_dataDimension.data.push(obj);
          });

          new_arr_seriesData.push(obj_dataDimension);
        });
        new_arr_seriesData.map((item) => {
          seriesData.map((ele) => {
            if (item.name == ele.name) {
              item.data.map((key) => {
                if (key.date == ele.date) {
                  key.value = ele.quantity;
                }
              });
            }
          });
        });

        console.log(new_arr_seriesData);
        new_arr_seriesData.map((item) => {
          let obj = {
            name: item.name,
            data: [],
            type: "bar",
            stack: "totle",
            barWidth: "20",
          };
          let obj_line = {
            name: item.name,
            data: [],
            type: "line",
          };
          item.data.map((ele) => {
            obj.data.push(ele.value);
            obj_line.data.push(ele.value);
          });
          this.chart_bar.seriesData.push(obj);
          this.chart_line.seriesData.push(obj_line);
        });

        console.log(55555);
        console.log(this.chart_bar.seriesData);
        console.log(this.chart_bar.legendData);
        console.log(this.chart_line.seriesData);

        this.loading = false;
        let that = this;
        this.$nextTick(() => {
          that.initBarChart();
          setTimeout(() => {
            that.initlineChart();
          }, 100);
        });
      });
    },
    initBarChart() {
      this.chart = echarts.init(document.getElementById("bar"));
      this.chart.clear();
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: this.chart_bar.legendData,
          orient: "horizontal",
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.chart_bar.xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            axisTick: {
              show: false,
            },
          },
        ],
        series: this.chart_bar.seriesData,
      });
    },
    initlineChart() {
      this.mychart_line_ = echarts.init(document.getElementById("line_box"));
      this.mychart_line_.clear();
      this.mychart_line_.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          data: this.chart_bar.legendData,
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.chart_bar.xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            axisTick: {
              show: false,
            },
          },
        ],
        series: this.chart_line.seriesData,
      });
    },

    handleQuery() {},
    DownloadQuery() {
      this.$nextTick(() => {
        // this.htmlToPdf("pdf_box", "客戶統計報告與分析");
      });
    },

    /** 導出按钮操作 */
    handleExport() {
      this.download(
        "biz/customer/export",
        {
          ...this.queryParams,
        },
        `customer_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
  <style lang="scss" scoped>
.customer_report {
  padding: 32px;
  position: relative;
  #bar,
  #line_box {
    width: 100%;
    height: 400px;
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>